import React, {useEffect, useRef, useState} from 'react';
import {Button, Drawer, message, Popconfirm} from 'antd';
import {PlusOutlined} from "@ant-design/icons";
import {
  deleteRuleChain, reloadRuleChain,
  reloadScriptNode,
  ruleChainList,
  ruleScriptNodeList
} from "@/services/wms-dev-tool/business-page-list";
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {useRequest} from "@@/plugin-request";
import RuleChainEditForm from "@/pages/BusinessPageList/components/RuleChainEditForm";

const RuleChainListDrawer = (props: any) => {

  const actionRef = useRef<ActionType>();
  const [rcEditFormOpen, handleRcEditFormOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.RuleChain>();
  const [editType,setEditType] = useState<string>('add')
  //刷新表格
  const refreshTable = () => {
    if (actionRef.current) {
      actionRef.current.reload();
    }
  }

  const onClose = () => {
    props.handleRcDrawerOpen(false)
  };

  useEffect(() => {
    // 在 props 变化时更新 state
    if (props.rcDrawerOpen) {
      refreshTable()
    }
  }, [props.rcDrawerOpen]);

  const {run: delRun} = useRequest(deleteRuleChain, {
    manual: true,
    onSuccess: () => {
      message.success("删除成功")
      refreshTable()
    },
  })

  //定义表格的数据列
  const columns: ProColumns<API.RuleChain>[] = [
    {
      title: <span>规则名称</span>,
      dataIndex: 'chainName',
      ellipsis: true,
      search: {
        transform: (value) => {
          return {chainName: `*${value}*`}
        }
      }
    },
    {
      title: <span>规则描述</span>,
      dataIndex: 'chainDesc',
      ellipsis: true,
      search: {
        transform: (value) => {
          return {chainDesc: `*${value}*`}
        }
      }
    },
    {
      title: <span>规则表达式</span>,
      dataIndex: 'elData',
      ellipsis: true,
      search: false
    },
    {
      title: <span>操作</span>,
      dataIndex: 'option',
      valueType: 'option',
      render: (dom, record) => [
        <a key="edit" onClick={() => {
          setEditType('edit')
          setCurrentRow(record)
          handleRcEditFormOpen(true)
        }}>编辑</a>,
        <a key="refresh" onClick={async () => {
          const {message:msg, success} = await reloadRuleChain(record)
          if(success){
            message.success(msg)
            return
          }
        }}>刷新脚本</a>,
        <Popconfirm
          key="delete"
          title="提示"
          description="是否删除该条记录？请确认你在规则中没有引用到该节点！"
          onConfirm={() => delRun(record.id)}
          okText="是"
          cancelText="否">
          <a>删除</a>
        </Popconfirm>
      ],
    },
  ];

  // @ts-ignore
  return (
    <>
      <Drawer title="组件脚本配置" placement="right" open={props.rcDrawerOpen} onClose={onClose}
              width="1000px">
        <ProTable<API.RuleChain, API.PageParams>
          headerTitle={<span>组件脚本配置</span>}
          actionRef={actionRef}
          rowKey="id"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                setEditType('add')
                handleRcEditFormOpen(true)
              }}>
              <PlusOutlined/>新建
            </Button>,
          ]}
          request={(params: any, sort, filter) => {
            params.pageId = props.pageId
            return ruleChainList(params, sort, filter);
          }}
          columns={columns}
        />
      </Drawer>
      <RuleChainEditForm
        rcEditFormOpen={rcEditFormOpen}
        handleRcEditFormOpen={handleRcEditFormOpen}
        ok={refreshTable}
        values={editType==='edit'?currentRow:{}}
        pageId={props.pageId}
        editType={editType}
      ></RuleChainEditForm>
    </>
  );
};

export default RuleChainListDrawer;
